<template>
  <div>
    <table class="table">
      <tr class="title">
        <td rowspan="10000">种猪场</td>
        <td rowspan="2">出生年份</td>
        <td rowspan="2">数量</td>
        <!-- <td colspan="4">校正100kg体重日龄EBV</td>
        <td colspan="4">背膘厚EBV</td>
        <td colspan="4">总仔数EBV</td>
        <td colspan="4">父系指数</td>
        <td colspan="4">母系指数</td> -->
          <td colspan="4" v-for="(t,index) in tabList">{{t}}</td>
      </tr>
      <tr class="title">
        <td v-if="view1">均值</td>
        <td v-if="view1">最大</td>
        <td v-if="view1">最小</td>
        <td v-if="view1">标准差</td>
        <td>均值</td>
        <td>最大</td>
        <td>最小</td>
        <td>标准差</td>
        <td>均值</td>
        <td>最大</td>
        <td>最小</td>
        <td>标准差</td>
        <td>均值</td>
        <td>最大</td>
        <td>最小</td>
        <td>标准差</td>
        <td>均值</td>
        <td>最大</td>
        <td>最小</td>
        <td>标准差</td>
      </tr>
      <tr v-for="(item,index) in list">
        <td>{{item.time}}</td>
        <td>{{item.countNum}}</td>
        <td>{{item.bgjrlAve}}</td>
        <td>{{item.bgjrlMax}}</td>
        <td>{{item.bgjrlMin}}</td>
        <td>{{item.bgjrlStd}}</td>
        <td>{{item.bbhAve}}</td>
        <td>{{item.bbhMax}}</td>
        <td>{{item.bbhMin}}</td>
        <td>{{item.bbhStd}}</td>
        <td>{{item.zzsAve}}</td>
        <td>{{item.zzsMax}}</td>
        <td>{{item.zzsMin}}</td>
        <td>{{item.zzsStd}}</td>
        <td v-if="view1">{{item.fxzsAve}}</td>
        <td v-if="view1">{{item.fxzsMax}}</td>
        <td v-if="view1">{{item.fxzsMin}}</td>
        <td v-if="view1">{{item.fxzsStd}}</td>
        <td>{{item.mxzsAve}}</td>
        <td>{{item.mxzsMax}}</td>
        <td>{{item.mxzsMin}}</td>
        <td>{{item.mxzsStd}}</td>
      </tr>
    </table>
    <table class="table noborder">
      <tr class="title">
        <td rowspan="10">
          全 国
          <i>&nbsp;</i>
        </td>
        <td rowspan="2">出生年份</td>
        <td rowspan="2">数量</td>
        <td colspan="4">校正100kg体重日龄EBV</td>
        <td colspan="4">背膘厚EBV</td>
        <td colspan="4">总仔数EBV</td>
        <td colspan="4">父系指数</td>
        <td colspan="4">母系指数</td>
      </tr>
      <tr class="title">
        <td v-if="view1">均值</td>
        <td v-if="view1">最大</td>
        <td v-if="view1">最小</td>
        <td v-if="view1">标准差</td>
        <td>均值</td>
        <td>最大</td>
        <td>最小</td>
        <td>标准差</td>
        <td>均值</td>
        <td>最大</td>
        <td>最小</td>
        <td>标准差</td>
        <td>均值</td>
        <td>最大</td>
        <td>最小</td>
        <td>标准差</td>
        <td>均值</td>
        <td>最大</td>
        <td>最小</td>
        <td>标准差</td>
      </tr>
      <tr v-for="(item,index) in list">
        <td>{{item.time}}</td>
        <td>{{item.countNum}}</td>
        <td>{{item.bgjrlAve}}</td>
        <td>{{item.bgjrlMax}}</td>
        <td>{{item.bgjrlMin}}</td>
        <td>{{item.bgjrlStd}}</td>
        <td>{{item.bbhAve}}</td>
        <td>{{item.bbhMax}}</td>
        <td>{{item.bbhMin}}</td>
        <td>{{item.bbhStd}}</td>
        <td>{{item.zzsAve}}</td>
        <td>{{item.zzsMax}}</td>
        <td>{{item.zzsMin}}</td>
        <td>{{item.zzsStd}}</td>
        <td>{{item.fxzsAve}}</td>
        <td>{{item.fxzsMax}}</td>
        <td>{{item.fxzsMin}}</td>
        <td>{{item.fxzsStd}}</td>
        <td>{{item.mxzsAve}}</td>
        <td>{{item.mxzsMax}}</td>
        <td>{{item.mxzsMin}}</td>
        <td>{{item.mxzsStd}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
    
        "母系指数",
        "校正达100Kg日龄体重EBV",
        "校正达100Kg体重背膘EBV",
        "总仔数EBV"
      ],
      list: [
        {
          time: "2014",
          countNum: "10",
          bgjrlAve: "0.25",
          bgjrlMax: "0.26",
          bgjrlMin: "0.24",
          bgjrlStd: "0.23",
          bbhAve: "0.25",
          bbhMax: "0.26",
          bbhMin: "0.24",
          bbhStd: "0.23",
          zzsAve: "15",
          zzsMax: "16",
          zzsMin: "14",
          zzsStd: "10",
          fxzsAve: "0.25",
          fxzsMax: "0.26",
          fxzsMin: "0.24",
          fxzsStd: "0.23",
          mxzsAve: "0.25",
          mxzsMax: "0.26",
          mxzsMin: "0.24",
          mxzsStd: "0.23"
        },
        {
          time: "2015",
          countNum: "10",
          bgjrlAve: "0.25",
          bgjrlMax: "0.26",
          bgjrlMin: "0.24",
          bgjrlStd: "0.23",
          bbhAve: "0.25",
          bbhMax: "0.26",
          bbhMin: "0.24",
          bbhStd: "0.23",
          zzsAve: "15",
          zzsMax: "16",
          zzsMin: "14",
          zzsStd: "10",
          fxzsAve: "0.25",
          fxzsMax: "0.26",
          fxzsMin: "0.24",
          fxzsStd: "0.23",
          mxzsAve: "0.25",
          mxzsMax: "0.26",
          mxzsMin: "0.24",
          mxzsStd: "0.23"
        }
      ],
    
    };
  },
  created() {
    this.changeTab()
  },
  methods: {
    changeTab(){
      if(this.tabList.indexOf("父系指数")  ==-1){
         this.view1 = false
      }
    }
  }
};
</script>

<style scoped lang="scss">
.table {
  width: 100%;
  tr {
    td {
      text-align: center;
      padding: 6px 10px;
      color: #606266;
      font-size: 14px;
    }
  }
  .title {
    font-weight: 700;
    color: #909399;
    background: #f5f7fa;
  }
  tr:hover {
    background: #f5f7fa;
    cursor: pointer;
  }
}
.noborder {
  tr:first-child {
    td {
      border-top: none;
    }
  }
}
</style>
